<template>

    <div v-cloak class="aui-wrapper aui-page__iframe">
        <div class="aui-content__wrapper">
            <div class="aui-content">
                <el-card shadow="never" class="aui-card--fill">
                    <div class="mod-sys__dict">
                        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                            <el-form-item>
                                <el-input size="small" v-model="dataForm.dictName" placeholder="名称"
                                          clearable></el-input>
                            </el-form-item>
                            <el-form-item v-if="dataForm.pid === '0'">
                                <el-input size="small" v-model="dataForm.dictType" placeholder="类型"
                                          clearable></el-input>
                            </el-form-item>
                            <el-form-item v-if="dataForm.pid !== '0'">
                                <el-input size="small" v-model="dataForm.dictValue" placeholder="值"
                                          clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" @click="getDataList()">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="primary" @click="addOrUpdateHandle()">新增</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" type="danger" @click="deleteHandle()">删除</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table
                                v-loading="dataListLoading"
                                :data="dataList"
                                border
                                @selection-change="dataListSelectionChangeHandle"
                                @sort-change="dataListSortChangeHandle"
                                style="width: 100%;">
                            <el-table-column type="selection" header-align="center" align="center"
                                             width="50"></el-table-column>
                            <el-table-column prop="dictName" label="dictName" header-align="center"
                                             align="center"></el-table-column>
                            <el-table-column prop="dictType" label="类型" header-align="center"
                                             align="center">
                                <template #default="scope">
                                    <span v-if="dataForm.pid !== '0'">{{ scope.row.dictType }}</span>
                                    <el-button v-else type="text" @click="childHandle(scope.row)">{{ scope.row.dictType
                                        }}
                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column v-if="dataForm.pid !== '0'" prop="dictValue" label="字典值"
                                             header-align="center" align="center"></el-table-column>
                            <el-table-column prop="sort" label="排序" sortable="custom"
                                             header-align="center" align="center"></el-table-column>
                            <el-table-column prop="remark" label="备注" header-align="center"
                                             align="center"></el-table-column>
                            <el-table-column prop="createDate" label="创建时间" sortable="custom"
                                             header-align="center" align="center" width="180"></el-table-column>
                            <el-table-column label="操作" fixed="right" header-align="center" align="center"
                                             width="150">
                                <template #default="scope">
                                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
                                    <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                v-if="dataForm.pid === '0'"
                                :current-page="page"
                                :page-sizes="[10, 20, 50, 100]"
                                :page-size="limit"
                                :total="total"
                                layout="total, sizes, prev, pager, next, jumper"
                                @size-change="pageSizeChangeHandle"
                                @current-change="pageCurrentChangeHandle">
                        </el-pagination>
                        <!-- 弹窗, 新增 / 修改 -->
                        <DictAddOrUpdateComponent v-if="addOrUpdateVisible" ref="addOrUpdate"
                                                  @refresh-data-list="getDataList"></DictAddOrUpdateComponent>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    /*import CtAddOrUpdate from "../../components/sys/CtAddOrUpdate";*/
import DataList from "@/utils/DataList";
import {
		onMounted,
		toRefs
	} from "vue";

    export default {
        name: "Dict",
		components: {
		      /*'add-or-update': CtAddOrUpdate()*/
		    },
		setup(){
			const {
			    dataForm,
			    mixinViewModuleOptions,
			    getDataList,
			    dataList,
			    total,
			    page,
			    limit,
			    dataListLoading,
			    dataListSelectionChangeHandle,
			    dataListSortChangeHandle,
			    pageSizeChangeHandle,
			    pageCurrentChangeHandle,
			    addOrUpdateHandle,
			    deleteHandle,
			    exportHandle,
			    addOrUpdateVisible,
			    dataListSelections,
			    addOrUpdate

			} = DataList();

			onMounted(() => {
				mixinViewModuleOptions.value.activatedIsNeed=true,
			    mixinViewModuleOptions.value.getDataListURL = '/sys/dict/page';
			    mixinViewModuleOptions.value.deleteURL = '/sys/dict';
			    mixinViewModuleOptions.value.getDataListIsPage = true;
			    mixinViewModuleOptions.value.deleteIsBatch=true;
			    /*dataForm.value.pid = '0';
				dataForm.value.dictName = '';
				dataForm.value.dictType = '';
				dataForm.value.dictValue = '';*/

			    if (mixinViewModuleOptions.value.activatedIsNeed) {
			        getDataList();
			    }

			})
			return {
			    dataForm,
			    mixinViewModuleOptions,
			    getDataList,
			    dataList,
			    total,
			    page,
			    limit,
			    dataListLoading,
			    dataListSelectionChangeHandle,
			    dataListSortChangeHandle,
			    pageSizeChangeHandle,
			    pageCurrentChangeHandle,
			    addOrUpdateHandle,
			    deleteHandle,
			    exportHandle,
			    addOrUpdateVisible,
			    dataListSelections,
			    addOrUpdate
			}
		}



    }

</script>

<style scoped>

</style>
